<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <script src="index.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: rgb(230, 227, 227);
        }

        header {
            position: relative;
            height: 50px;
            margin-bottom: 10px;
            background-color: rgb(137, 139, 192);
        }

        section {
            position: absolute;
            width: 456px;
            height: 100%;
            left: 300px;
        }

        label {
            display: inline-block;
            margin: 10px 100px 0 0;
            color: white;
            font-size: 25px;
        }

        header input {
            position: absolute;
            top: 15px;
            width: 250px;
            height: 20px;
            outline: none;
            border-radius: 5px;
            border: 0;
            box-shadow: 2px 2px 4px rgb(36, 37, 66);
        }

        span {
            float: right;
            padding: 0 3px;
            height: 20px;
            border-radius: 50%;
            font-size: 12px;
            font-weight: normal;
            text-align: center;
            line-height: 20px;
            background-color: rgb(245, 245, 245);
        }

        ol,
        ul {
            list-style: none;
            margin: 15px 0;
        }

        li {
            position: relative;
            box-sizing: border-box;
            line-height: 25px;
            height: 25px;
            border-left: 3px solid rgb(6, 107, 110);
            border-radius: 3px;
            margin: 5px 0;
            background-color: rgb(137, 139, 192);
        }

        ul li {
            background-color: #ccc;
        }

        li input {
            float: left;
            height: 20px;
            width: 20px;
            margin: 2.5px 8px 0;
        }

        li a {
            position: absolute;
            height: 15px;
            width: 15px;
            top: 2.5px;
            right: 2px;
            border-radius: 50%;
            border: 2px solid #eee;
            text-decoration: none;
            text-align: center;
        }

        li a::after {
            position: absolute;
            content: "";
            text-align: center;
            display: inline-block;
            height: 12px;
            width: 12px;
            top: 1.5px;
            left: 1.5px;
            border-radius: 6px;
            background-color: #eee;
        }
    </style>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo">
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">
        </ul>
    </section>

    <!-- <script>
        //刷新页面不会丢失数据 用localStorage
        //按下回车 把内容储存到页面中
        //储存数据格式用数组形式（储存的内容很多）
        var todolist = [{
            title: 1,
            done: false
        }, {
            title: 2,
            done: false
        }];
        // localStorage.setItem("todo", todolist);
        //1.本地储存只能存储字符串的数据格式 ，所以要把数组对象（todolist）转化为字符串格式 JSON.stringify()
        localStorage.setItem("todo", JSON.stringify(todolist));
        var data = localStorage.getItem("todo");
        // console.log(typeof data);//此时data还是string类型，所以要转化为数组对象才能获取里面的内容
        data = JSON.parse(data);
        console.log(data[0].title); //成功取到内容
    </script> -->
</body>

</html>